<template>
	<view class="ikz-menu"  :style="{color:cssInfo.color,margintop:cssInfo.margin_top+'rpx',backgroundColor:cssInfo.background_color,width:cssInfo.width+'%',borderRadius:cssInfo.bg_border_radius+'rpx'}">
		<!--
		模板说明：
		1、支持一行4个图标和5个图标，通过css数据中的menu_num数量控制
		2、支持颜色自定义，直接使用css数据中的color
		3、其他显示和功能数据同系统设定
		 -->
		<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" style="" class="ikz-swiper">
			<block v-for="(vo,indexs) in show_info " :key="indexs">
				<swiper-item>
					<view class="ikz-swiper-item">
						<!-- <view class="ikz-menu-sm" style="color:{{cssInfo.color}};margin-top:{{cssInfo.margin_top}}rpx;background-color:{{cssInfo.background_color}};width:{{cssInfo.width}}%;border-radius:{{cssInfo.bg_border_radius}}rpx;"> -->
						<view class="ikz-menu-sm">
						    <block v-if="cssInfo.num == 4">
						        <block v-for="(item,index) in vo"  :key="index">
						          <!--分享和客服功能-->
						          <block v-if="item.url.path=='share'||item.url.path=='contact'">
						            <view class="ikz-menu-item">
						                <image class="ikz-menu-img" :src="item.src"  :style="{borderRadius:cssInfo.border_radius}"></image>
						                <!-- <image class="ikz-menu-img" :src="item.src"></image> -->
						                <view class="ikz-menu-title">
						                    {{item.title}}
						                </view>
						                <button class='ikz-login-button' :open-type="item.url.path"></button>
						            </view>
						          </block>
						          <!--分享和客服功能-->
						
						          <!--正常功能-->
						          <block v-else>
						            <view class="ikz-menu-item"  @click="directToPath" :data-info="item.url.info" :data-mode="item.url.mode" :data-path="item.url.path">
						                <image class="ikz-menu-img" :src="item.src" :style="{borderRadius:cssInfo.border_radius}"></image>
						                <!-- <image class="ikz-menu-img" src="{{item.src}}" style='border-radius:{{cssInfo.border_radius}}'></image> -->
						                <view class="ikz-menu-title">
						                    {{item.title}}
						                </view>
						            </view>
						          </block>
						          <!--正常功能-->
						        </block>
						    </block>
						    <block v-else>
						        <block v-for="(item,index) in vo"  :key="index">
						          <!--分享和客服功能-->
						          <block v-if="item.url.path=='share'||item.url.path=='contact'">
						            <view class="ikz-menu-item-small">
						                <image class="ikz-menu-img" :src="item.src" :style="{borderRadius:cssInfo.border_radius}"></image>
						                <!-- <image class="ikz-menu-img" :src="item.src" style='border-radius:{{cssInfo.border_radius}}'></image> -->
						                <view class="ikz-menu-title-small">
						                    {{item.title}}
						                </view>
						                <button class='ikz-login-button' :open-type="item.url.path"></button>
						            </view>
						          </block>
						          <!--分享和客服功能-->
						
						          <!--正常功能-->
						          <block v-else>
						            <view class="ikz-menu-item-small"   @click="directToPath" :data-info="item.url.info" :data-mode="item.url.mode" :data-path="item.url.path">
						                <image class="ikz-menu-img" :src="item.src" :style="{borderRadius:cssInfo.border_radius}"></image>
						                <!-- <image class="ikz-menu-img" src="{{item.src}}" style='border-radius:{{cssInfo.border_radius}}'></image> -->
						                <view class="ikz-menu-title-small">
						                    {{item.title}}
						                </view>
						            </view>
						          </block>
						          <!--正常功能-->
						            
						        </block>
						    </block>
						</view>
					</view>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
	var app = getApp();
	import ikz from "@/pages/Common/tools"
	export default {
		name: 'menu3',
		props: {
			showData: {
				type: Object,
			},
			cssData: {
				type: Object,
			}
		},
		data() {
			return {
				indicatorDots: true,
				vertical: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				background: ['', ''],
				cssInfo:{},
				badgeStyle: '',
				show_info:[],
			};
		},
		watch: {
			showData:{
				handler(newName, oldName) {
					var show_list = newName.list;
					var show_info = [];
					var key = 0;
					var index = 0;
					show_info[key] = [];
					for(var i = 0;i<show_list.length;i++){
						var remainder = i%8;
						if(remainder == 0 && i!=0){
							key++;
							index = 0;
							show_info[key] = [];
							show_info[key].push(show_list[i]);
						}else{
							show_info[key].push(show_list[i]);
							index++;
						}
					}
					this.show_info = show_info;
				},
				immediate: true,
				deep: true
			},
			cssData: {
				handler(newName, oldName) {
					var cssInfo = {};
					cssInfo.color = newName.color || '#353535';
					cssInfo.num = newName.num || 4;
					cssInfo.border_radius = newName.border_radius || 5;
					cssInfo.margin_top = newName.margin_top || 0;
					cssInfo.background_color = newName.background_color || '';
					cssInfo.width = newName.width || 100;
					cssInfo.bg_border_radius = newName.bg_border_radius || 0;
					this.cssInfo = cssInfo;
				},
				immediate: true,
				deep: true
			},
		},
		mounted() {
			
		},
		methods: {
			setStyle() {
				this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
			},
			directToPath(e) {
				var url = {
					info:e.currentTarget.dataset.info,
					mode:e.currentTarget.dataset.mode,
					path:e.currentTarget.dataset.path,
				}
				app.globalData.type_id = e.currentTarget.dataset.info;
				ikz.getNav(url);
			}
		}
	};
</script>

<style  lang="scss" scoped>
	.ikz-menu{
		width: 100%;
		margin:  auto;
	}
	.ikz-swiper {
		height: 430rpx;
		background: #fff;
		border-radius: 15rpx;
		overflow: hidden;
		width: 95%;
		margin: 15rpx auto 0;
	}
	.ikz-swiper-item{
		margin-top: 20upx;
	}
	.ikz-menu-sm {
	    width: 100%;
	    margin:  auto;
	    display: flex;
	    flex-wrap: wrap;
	}
	
	.ikz-menu-item {
	    width: 25%;
	    position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	    text-align: center;
	    margin: 15rpx 0px;
	}
	.ikz-login-button{
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0px;
	  left: 0px;
	  opacity: 0;
	  border: 0px;
	  z-index: 100;
	}
	.ikz-menu-item-small {
	    width: 20%;
	    position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	    text-align: center;
	    margin: 15rpx 0px;
	    font-size: 29rpx;
	}
	
	.ikz-menu-img {
	    width: 120rpx;
	    height: 120rpx;
	}
	
	.ikz-menu-img-circle {
	    width: 65rpx;
	    height: 65rpx;
	    border-radius: 50%;
	}
	
	.ikz-menu-img-small {
	    width: 82rpx;
	    height: 82rpx;
	}
	
	.ikz-menu-img-small-circle {
	    width: 82rpx;
	    height: 82rpx;
	    border-radius: 50%;
	}
	
	.ikz-menu-title {
	    margin-top: 5rpx;
	    font-size: 28rpx;
	}
	
	.ikz-menu-title-small {
		width: 100%;
	    margin-top: 5rpx;
	    font-size: 25rpx;
	}

</style>
